<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <link rel="stylesheet" href="./css/light.css" class="light-style">
    <link rel="stylesheet" href="./css/dark.css" class="dark-style" disabled>
</head>
<body id="index">
    <div id="wrap">
        <div id="header">
            <div class="header-content clearfix">
                <div class="header-btn qiushi pull-left active" tapmode="tap-active" onclick="openOtherFrame(0);"></div>
                <div class="header-btn nearby pull-left" tapmode="tap-active" onclick="openOtherFrame(1);"></div>
                <div class="header-btn message pull-left" tapmode="tap-active" onclick="openOtherFrame(2);"></div>
                <div class="header-btn menu pull-right" tapmode="tap-active" onclick="openMenu();"></div>
                <div class="header-btn qiubaihuo pull-right" tapmode="tap-active"></div>
            </div>
            <div class="qiushi-tabBar clearfix">
                <div class="tabBar-btn pull-left all-type active" tapmode="tap-active" onclick="changeGroupIndex(0);">图文</div>
                <div class="tabBar-btn pull-left text-type" tapmode="tap-active" onclick="changeGroupIndex(1);">纯文</div>
                <div class="tabBar-btn pull-left pic-type" tapmode="tap-active" onclick="changeGroupIndex(2);">纯图</div>
                <div class="tabBar-btn pull-left latest-type" tapmode="tap-active" onclick="changeGroupIndex(3);">最新</div>
                <div class="tabBar-btn pull-left essence-type" tapmode="tap-active" onclick="changeGroupIndex(4);">精华</div>
                <div class="tabBar-bar"></div>
            </div>
        </div>
        <div id="main">
                
        </div>
        
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/theme.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
// 糗事底部tabBar状态初始化
    $api.setStorage('bottomTabBarLock','shown');

    
// 记录窗口状态
    $api.setStorage('win',{'root':1});
    $api.setStorage('frame',{});
// 糗事 tabBar切换效果
    var aTabBarBtn = $api.domAll('.qiushi-tabBar .tabBar-btn');
    var tabBar = $api.dom('.qiushi-tabBar .tabBar-bar');
    var changeBar = function(index){
        tabBar.style.webkitTransform = 'translateX('+(100*index)+'%)';
        tabBar.style.transform = 'translateX('+100*index+'%)';
        for (var i = 0,len = aTabBarBtn.length; i < len; i++) {
            if (index == i) {
                $api.addCls(aTabBarBtn[i],'active');
            } else{
                $api.removeCls(aTabBarBtn[i],'active');
            }
            
        };
    };
// 糗事窗口组切换
    var changeGroupIndex = function(index){
        api.setFrameGroupIndex({
            name: 'qiushi-group',
            index: index,
            scroll: true
        });
    };
// 打开菜单
    var openMenu = function(){
        api.openFrame({
            name: 'menu',
            url: './html/float/menu.html',
            bounces: false,
            rect: {
                x: 0,
                y: $api.dom( '#header .header-content' ).offsetHeight,
                w: 'auto',
                h: 'auto'
            },
            reload: true
        });
    };
// 糗事，糗友，消息按钮切换
    var aHeaderBtn = $api.domAll('.header-content .pull-left');
    var qiushiTabBar = $api.dom('.qiushi-tabBar');
    var changeHeaderBtn = function(index){
        if (index == 0) {
            qiushiTabBar.style.display = 'block';
        } else{
            qiushiTabBar.style.display = 'none';
        }
        for (var i = 0,len = aHeaderBtn.length; i < len; i++) {
            if (index == i) {
                $api.addCls(aHeaderBtn[i],'active');
            } else{
                $api.removeCls(aHeaderBtn[i],'active');
            }
            
        };
    };
// 糗事，糗友，消息frame切换
    var openOtherFrame = function(index){
        changeHeaderBtn(index);
        if (index == 0) {
            api.setFrameAttr({
                name: 'nearby',
                hidden: true
            });
            api.setFrameAttr({
                name: 'message',
                hidden: true
            });
            api.setFrameGroupAttr({
                name: 'qiushi-group',
                hidden: false
            });
            api.setFrameAttr({
                name: 'qiushi-bottom',
                hidden: false
            });
            api.setFrameAttr({
                name: 'nearby-bottom',
                hidden: true
            });
        } else if(index == 1) {
            api.openFrame({
                name: 'nearby',
                url: './html/other/nearby.html',
                rect: {
                    x: 0,
                    y: $api.offset(header).h,
                    w: 'auto',
                    h: $api.offset(main).h
                },
                bounces: true,
                opaque: true
            });
            // 附近的人nearby底部状态初始化
            $api.setStorage('nearbyTabBarLock','shown');
            api.openFrame({
                name: 'nearby-bottom',
                url: './html/float/nearby-bottom.html',
                bounces: false,
                rect: {
                    x: 0,
                    y: api.winHeight-48,
                    w: 'auto',
                    h: 48
                }
            });
            api.setFrameAttr({
                name: 'message',
                hidden: true
            });
            api.setFrameGroupAttr({
                name: 'qiushi-group',
                hidden: true
            });
            api.setFrameAttr({
                name: 'qiushi-bottom',
                hidden: true
            });
        } else {
            api.openFrame({
                name: 'message',
                url: './html/other/message.html',
                rect: {
                    x: 0,
                    y: $api.offset(header).h,
                    w: 'auto',
                    h: $api.offset(main).h
                },
                bounces: true,
                opaque: true
            });
            api.setFrameAttr({
                name: 'nearby',
                hidden: true
            });
            api.setFrameGroupAttr({
                name: 'qiushi-group',
                hidden: true
            });
            api.setFrameAttr({
                name: 'qiushi-bottom',
                hidden: true
            });
            api.setFrameAttr({
                name: 'nearby-bottom',
                hidden: true
            });
        }
    };
// 糗事详情
    var toQiushiDetail = function(id){
        api.openWin({
            name: 'qiushi-detail',
            url: './html/detail/qiushi-detail.html',
            bounces: false,
            pageParam: {
                id: id
            },
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    };
// 糗友资料
    var toProfile = function(id,type,index){
        var _index = index || 'ta';
        api.openWin({
            name: 'profile',
            url: './html/detail/profile.html',
            bounces: false,
            pageParam: {
                id: id,
                type: type,
                index: _index
            },
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    };
// 糗事的选项菜单
    var toShareOption = function(id){
        api.openFrame({
            name: 'share-option',
            url: './html/float/share-option.html',
            bounces: false,
            pageParam: {
                id: id
            },
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        });
    };

    apiready = function(){

        api.setWinAttr({
            name: 'root',
            bounces: false
        });
        window.header = $api.byId('header');
        window.headerTabBar = $api.dom('.qiushi-tabBar');
        $api.fixStatusBar( $api.dom( '#header .header-content' ) ); 
        var headerPos = $api.offset(header);
        window.main = $api.byId('main');
        var mainPos = $api.offset(main);

        var groupColor = $api.getStorage('theme');
        if (groupColor && groupColor == 1) {
            groupColor = '#1E1E23';
        } else{
            groupColor = '#FFFFFF';
        }

        api.openFrameGroup({
            name: 'qiushi-group',
            background: groupColor,
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: mainPos.h
            },
            index: 0,
            frames:[
                {
                    name: 'all-type', 
                    url: './html/qiushi/all-type.html', 
                    pageParam:{}, 
                    bounces:true, 
                    opaque:true,
                    bgColor: groupColor
                },{
                    name: 'text-type', 
                    url: './html/qiushi/text-type.html', 
                    pageParam:{}, 
                    bounces:true, 
                    opaque:true,
                    bgColor: groupColor
                },{
                    name: 'pic-type', 
                    url: './html/qiushi/pic-type.html', 
                    pageParam:{}, 
                    bounces:true, 
                    opaque:true,
                    bgColor: groupColor
                },{
                    name: 'latest-type', 
                    url: './html/qiushi/latest-type.html', 
                    pageParam:{}, 
                    bounces:true, 
                    opaque:true,
                    bgColor: groupColor
                },{
                    name: 'essence-type', 
                    url: './html/qiushi/essence-type.html', 
                    pageParam:{}, 
                    bounces:true, 
                    opaque:true,
                    bgColor: groupColor
                }
            ]
        }, function(ret, err){
            var name = ret.name;
            var index = ret.index;
            changeBar(index);
        });
        api.openFrame({
            name: 'qiushi-bottom',
            url: './html/float/qiushi-bottom.html',
            bounces: false,
            rect: {
                x: 0,
                y: api.winHeight-48,
                w: 'auto',
                h: 48
            }
        });
        
        
    };
</script>
</html>